<template>
    <div id="background">
        <div id="login">
            <p id="title">山口老年颐养中心</p>
            <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
                <el-form-item
                        prop="uname"
                        label="用户名"
                        :rules="{ required: true, message: '请输入用户名', trigger: 'blur' }">
                    <el-input v-model="dynamicValidateForm.uname"></el-input>
                </el-form-item>
                <el-form-item
                        prop="pwd"
                        label="密码"
                        :rules="{required: true, message: '密码不能为空', trigger: 'blur'}">
                    <el-input v-model="dynamicValidateForm.pwd" :show-password=true type="password"></el-input>
                </el-form-item>
<!--                <div id="checkDiv">-->
<!--                    &lt;!&ndash;                    <div id="check"></div>&ndash;&gt;-->
<!--                    &lt;!&ndash;                    <div id="checkImg"></div>&ndash;&gt;-->
<!--                </div>-->
                <el-form-item>
                    <!--submitForm('dynamicValidateForm')-->
                    <el-button type="primary" @click="login()">提交</el-button>
                    <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>


<script>
    import qs from 'qs'
    import axios from "axios";

    export default {
        data() {
            return {
                dynamicValidateForm: {
                    pwd: '',
                    uname: ''
                }
            };
        },
        methods: {
            login() {
                const form = this.$data.dynamicValidateForm;
                axios({
                    method:'post',
                    url:'/api/login_page/login',
                    data:qs.stringify(this.$data.dynamicValidateForm),
                }).then(res=>{
                    console.log(res.data);
                    if(res.data.rs===true){
                        console.log(res);
                            if(res.data.data.type=='管理员'){
                                this.$router.push({path:'/index/sub-div/usermanager', query :{ uname: this.dynamicValidateForm.uname,id:res.data.data.userId,power:res.data.data.type} });
                            }
                        if(res.data.data.type=='用户'){
                            this.$router.push({path:'/index/sub-div/checkbed', query :{ uname: this.dynamicValidateForm.uname,id:res.data.data.userId,power:res.data.data.type} });
                        }
                    }
                    else{
                        alert("输入有误");
                    }
                    });
                },

            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

            removeDomain(item) {
                var index = this.dynamicValidateForm.domains.indexOf(item)
                if (index !== -1) {
                    this.dynamicValidateForm.domains.splice(index, 1)
                }
            },
        }
    }

</script>


<style>

    #background {
        width: 100%;
        height: 100%;
        background: url("../assets/main.jpg") no-repeat center center; /*加载背景图*/ /* 背景图不平铺 */
        background-size: cover; /* 让背景图基于容器大小伸缩 */
        background-attachment: fixed;
    }

    #login {
        float: right;
        width: 500px;
        height: 100%;
        margin: 0 auto;
        background-color: rgba(0, 0, 0, 0.5);
        font-size: 27px;
    }
    #login #title {
        width: 500px;
        color: aliceblue;
        text-align: center;
        margin-top: 130px;
        margin-bottom: 80px;
    }
    #login  .demo-dynamic
    {
        margin-left: 40px;
    }
    #login #title #formDiv {
        margin: 0 auto;
    }
    #login .el-form-item__label
    {
        color: aliceblue;
    }
    #login .el-input
    {
        width:230px;
    }
    #login #loginName,
    #login #loginPwd {
        width: 253px;

        margin: 0 auto;
    }
    #login #loginPwd {
        margin-top: 1px;
    }

    #login #loginName *,
    #login #loginPwd * {
        float: left;
    }
    #login #loginName div,
    #login #loginPwd div {
        width: 40px;
        background-color: white;
        border-top-left-radius: 1px;

        border: 1px solid #e0e0e0;
    }
    #login #loginPwd div {
        border-top-left-radius: 0em;
        border-bottom-left-radius: 1px;
        border-top: 0;
    }
    #login #loginName div i,
    #login #loginPwd div i {
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        font-size: 20px;
        color: #c7c9cd;
    }
    #login #loginName input,
    #login #loginPwd input {
        padding: 0;
        padding-left: 10px;
        border: 0;
        width: 200px;
        height: 40px;
        border-top-right-radius: 1px;
        border: 1px solid #e0e0e0;
        border-left: 0;
    }
    #login #loginPwd input {
        border-top-right-radius: 0;
        border-bottom-right-radius: 1px;
        border-top: 0;
    }
    #login #button {
        border: 0;
        padding: 0;
        width: 253.5px;
        height: 40px;
        margin-left: 123px;
    }
    #checkDiv{
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
        margin-bottom: 20px;
    }
    #check{
        width: 100px;
        height: 30px;
        background-color: white;
        margin-left: 100px;


        border-radius: 0.1em;

    }

</style>
